<template>
  <div class="stocklistcontainer">
    <div class="toubu">
      <div class="tl">
        <span :class="headertab == 0 ? 'xuank' : ''" @click="headertab = 0"
          >沪深</span
        >
        <!-- <span :class="headertab == 1 ? 'xuank' : ''" @click="headertab = 1">可转债</span> -->
      </div>
      <a class="tr" @click="getsearch"></a>
    </div>
    <div class="othermain">
      <div class="daboxk">
        <div class="bankuai">
          <div
            class="erty "
            v-for="(i, index) in listArr1"
            :key="i.id"
            v-if="index < 3"
            :class="i.floatRate > 0 ? 'redbg' : 'greenbg'"
          >
            <h3 :class="i.floatRate > 0 ? 'red' : 'green'">
              {{ i.currentPoint || "--" }}
            </h3>
            <h5>
              {{ i.indexName
              }}<a :class="i.floatRate > 0 ? 'red' : 'green'"
                >{{ i.floatRate || "--" }}%</a
              >
            </h5>
          </div>
        </div>
      </div>
      <div class="poklk">
        <span>热门股票</span>
        <a></a>
      </div>
      <div class="renmen">
        <div class="dangeh">
          <div
            class="dank"
            v-for="(item, index) in listArr"
            v-if="index < 6"
            @click="goDetail(item)"
          >
            <h6>{{ item.name }}</h6>
            <p class="zhangl" :class="item.creaseRate > 0 ? 'red' : 'green'">
              {{ item.nowPrice }}
            </p>
            <p class="bili" :class="item.creaseRate > 0 ? 'red' : 'green'">
              {{ item.pricechange }} {{ item.creaseRate }}%
            </p>
          </div>
        </div>
      </div>
      <div class="zhnj">
        <span
          v-for="(item, index) in diefuList"
          :key="index"
          :class="diefuidx == index ? 'xuan' : ''"
          @click="diefuidx = index"
          >{{ item.name }}</span
        >
        <a
          class="pokl"
          :style="diefuidx == 0 ? 'left:10%' : diefuidx == 1 ? 'left:30%' : ''"
        ></a>
      </div>
      <div class="kanbox">
        <span class="k1">股票</span>
        <span class="k2">最新</span>
        <span class="k4">涨跌幅</span>
        <!-- <span class="k4">涨跌额</span> -->
      </div>
      <div class="kfgfd"></div>
      <div class="everylistmain">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('hj43')"
          @load="onLoad"
          v-if="diefuidx == 0"
          :immediate-check="false"
        >
          <div
            class="shujuk"
            v-for="(item, index) in listArr"
            :key="index"
            @click="goDetail(item)"
          >
            <div class="s1">
              <h6>{{ item.name }}</h6>
              <p>
                <span v-if="item.gid.indexOf('sz') >= 0">深</span>
                <span class="sh" v-if="item.gid.indexOf('sh') >= 0">沪</span>
                <span class="bj" v-if="item.gid.indexOf('bj') >= 0">北</span>
                <a class="shbg">{{ item.gid }}</a>
              </p>
            </div>
            <div class="s2 " :class="item.creaseRate > 0 ? 'hqred' : 'hqgreen'">
              {{ Number(item.nowPrice).toFixed(2) }}
            </div>
            <!-- <div class="s2 " :class="item.creaseRate>0?'hqred':'hqgreen'">{{item.creaseRate}}%</div> -->
            <div class="s4">
              <a :class="item.creaseRate > 0 ? 'hqredbtnbg' : 'hqgreenbtnbg'"
                >{{ item.creaseRate }}%</a
              >
            </div>
          </div>
        </van-list>
        <van-list
          v-model="loadings"
          :finished="finisheds"
          :finished-text="$t('hj43')"
          @load="onLoads"
          v-if="diefuidx == 1"
          :immediate-check="false"
        >
          <div
            class="shujuk"
            v-for="(item, index) in listArrs"
            :key="index"
            @click="goDetail(item)"
          >
            <div class="s1">
              <h6>{{ item.name }}</h6>
              <p>
                <span v-if="item.gid.indexOf('sz') >= 0">深</span>
                <span class="sh" v-if="item.gid.indexOf('sh') >= 0">沪</span>
                <span class="bj" v-if="item.gid.indexOf('bj') >= 0">北</span>
                <a class="shbg">{{ item.gid }}</a>
              </p>
            </div>
            <div class="s2 " :class="item.creaseRate > 0 ? 'hqred' : 'hqgreen'">
              {{ Number(item.nowPrice).toFixed(2) }}
            </div>
            <!-- <div class="s2 " :class="item.creaseRate>0?'hqred':'hqgreen'">{{item.creaseRate}}%</div> -->
            <div class="s4">
              <a :class="item.creaseRate > 0 ? 'hqredbtnbg' : 'hqgreenbtnbg'"
                >{{ item.creaseRate }}%</a
              >
            </div>
          </div>
        </van-list>
        <!-- <div class="shujuk">
                    <div class="s1">
                        <h6>格利尔</h6>
                        <p>
                            <span style="display: none;">深</span>
                            <span class="sh" style="display: none;">沪</span>
                            <span class="bj" style="">北</span>
                            <a class="bjbg">BJ831641</a>
                        </p>
                    </div>
                    <div class="s2 hqred">12.65</div>
                    <div class="s2 hqred">+31.77%</div>
                    <div class="s4"><a class="hqredbtnbg">3.05</a></div>
                </div> -->
        <!-- <div class="shujuk" v-for="i in 6">
                    <div class="s1">
                        <h6>安奈儿</h6>
                        <p><span style="">深</span><span class="sh" style="display: none;">沪</span><span class="bj"
                                style="display: none;">北</span><a class="">SZ002875</a></p>
                    </div>
                    <div class="s2 hqred">19.12</div>
                    <div class="s2 hqred">+10.01%</div>
                    <div class="s4"><a class="hqredbtnbg">1.74</a></div>
                </div> -->
      </div>
    </div>
    <div style="height:1.5rem"></div>
  </div>
</template>
<script>
import * as api from "@/axios/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      headertab: 0,
      diefuList: [
        {
          name: "涨幅榜"
        },
        {
          name: "跌幅榜"
        }
      ],
      diefuidx: 0,
      listArr: [],
      listArr1: [
        {
          id: 1,
          indexName: "上证指数",
          indexCode: "i000001",
          indexGid: "sh000001",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585556000,
          currentPoint: "--",
          floatPoint: "-0.1780",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        },
        {
          id: 2,
          indexName: "深证成指",
          indexCode: "i399001",
          indexGid: "sz399001",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585699000,
          currentPoint: "--",
          floatPoint: "-68.328",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        },
        {
          id: 3,
          indexName: "创业板指",
          indexCode: "i399006",
          indexGid: "sz399006",
          homeShow: 1,
          listShow: 1,
          transState: 1,
          depositAmt: 10000,
          transFee: 400,
          eachPoint: 300,
          minNum: 1,
          maxNum: 100,
          addTime: 1558585700000,
          currentPoint: "--",
          floatPoint: "-12.252",
          floatRate: "--",
          isOption: "0",
          type: null,
          tdesc: null
        }
      ],
      listArrs: [],
      pageNum: 1,
      finished: false,
      loading: false,
      pageNums: 1,
      finisheds: false,
      loadings: false
    };
  },
  mounted() {
    this.getListMarket();
    this.getStock();
    this.getStocks();
    this.$nextTick(() => {
      setTimeout(() => {
        this.bindSocket();
      }, 500);
    });
  },
  beforeDestroy() {
    this.unBindSocket();
  },
  methods: {
    unBindSocket() {
      this.$socket.connected(socket => {
        socket.send({
          type: "unsub",
          params: "i000001,i399001,i399006"
        });
      });
    },
    // 链接socket
    bindSocket() {
      var that = this;
      that.$socket.connected(socket => {
        socket.send({
          type: "sub",
          params: "i000001,i399001,i399006,"
        });
        socket.on("DAY_MARKET", msg => {
          for (var i = 0; i < this.listArr1.length; i++) {
            if (this.listArr1[i].indexCode == msg.data.index_code) {
              this.listArr1[i].currentPoint = msg.data.price;
              this.listArr1[i].floatRate = msg.data.rate;
            }
          }
        });
      });
    },
    // goDetail(item){

    //     var type = item.symbol.substring(0,2)
    //     this.$router.push({path:'/kline',query:{
    //             code:item.code,
    //             type:type,
    //         }})
    // },
    async getListMarket() {
      let val = {
        pageNum: 1,
        pageSize: 15
      };
      // 获取指数列表
      let result = await api.getListMarket(val);
      this.loading = false;
      console.log("指数列表", result);
      if (result.status === 0) {
        this.listArr1 = result.data;
      } else {
        this.texts = result.msg;
        this.alertShow = true;
      }
    },
    getsearch() {
      this.$router.push({
        path: "/Searchlist"
      });
    },
    onLoad() {
      this.pageNum++;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      switch (this.diefuidx) {
        case 0:
          //   this.stockPlate = "";
          //   this.stockType = "";
          this.loading = true;
          this.getStock();
          break;
      }
    },
    onLoads() {
      this.pageNums++;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      switch (this.diefuidx) {
        case 1:
          this.loadings = true;
          this.getStocks();
          break;
      }
    },
    async getStock() {
      // 沪深升序
      let opt = {
        pageNum: this.pageNum,
        pageSize: 15,
        asc: 0,
        sort: "changepercent",
        node: "hs_a"
        // stockPlate: this.stockPlate,
        // keyWords: this.gpcode,
        // stockType: this.stockType
      };
      let data = await api.getStockSort(opt);
      this.loading = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true;
        }
        if (this.diefuidx == 0) {
          data.data.list.forEach(element => {
            this.listArr.push(element);
          });
        }
      } else {
        this.texts = data.msg;
        this.alertShow = true;
      }
    },
    async getStocks() {
      // 沪深降序
      let opt = {
        pageNum: this.pageNum,
        pageSize: 15,
        asc: 1,
        sort: "changepercent1",
        node: "hs_a"
        // stockPlate: this.stockPlate,
        // keyWords: this.gpcode,
        // stockType: this.stockType
      };
      let data = await api.getStockSort(opt);
      this.loadings = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true;
        }

        data.data.list.forEach(element => {
          this.listArrs.push(element);
        });
      } else {
        // this.texts = data.msg;
        // this.alertShow = true;
      }
    },
    // 进入详情
    goDetail(item) {
      //   if (this.userData.length == 0) {

      //     return;
      //   }
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = "0";
      var if_us = "";
      codes = item.code;
      names = item.name;
      stock_type = item.gid.substring(0, 2);
      soks = this.filterSH(item.gid);
      if_zhishu = "0";
      if_us = item.stock_type == "us" ? "1" : "";
      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu
        }
      });
    },
    filterSH(val) {
      if (val.indexOf("sh") >= 0) {
        return 1;
      } else if (val.indexOf("bj") >= 0 || val.indexOf("sz") >= 0) {
        return 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.red {
  color: #ff5353 !important;
}

.green {
  color: #20b844 !important;
}

.hqred {
  color: #f11614 !important;
}

.hqgreen {
  color: #09965f !important;
}

.redbg {
  background: #fdf7f7 !important;
}

.greenbg {
  background: #f4faf8 !important;
}

.stocklistcontainer {
}

.toubu {
  width: 100%;
  height: 1.6rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
  display: flex;
  justify-content: space-between;

  .tl {
    margin-left: 0.32rem;
    margin-top: 0.37rem;

    span {
      color: #fff;
      font-size: 0.37rem;
      margin-right: 0.53rem;
      vertical-align: bottom;
    }

    .xuank {
      font-size: 0.48rem;
    }
  }

  .tr {
    width: 0.43rem;
    height: 0.43rem;
    background: url()
      no-repeat 50%;
    background-size: 100%;
    margin-right: 0.4rem;
    margin-top: 0.32rem;
  }
}

.othermain {
  .daboxk {
    width: 100%;
    background: #fff;
    margin-top: -0.32rem;
    min-height: 1.07rem;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 0.4rem;

    .bankuai {
      width: 9.32rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .erty {
        width: 2.99rem;
        height: 2.14rem;
        background: #ffffff;
        border-radius: 0.21rem;
        text-align: center;

        h3 {
          font-size: 0.53rem;
          font-family: SourceHanSansCN;
          padding-top: 0.266rem;
          font-weight: 800;
          line-height: 0.75rem;
          margin-top: 0.13rem;
        }

        h5 {
          font-size: 0.32rem;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: #333;
          margin-top: 0.266rem;

          a {
            margin-left: 0.11rem;
          }
        }
      }
    }
  }

  .poklk {
    width: 9.48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;

    span {
      color: #333;
      font-size: 0.38rem;
      position: relative;
      font-weight: 600;
    }

    a {
      background: url()
        no-repeat 50%;
      background-size: 100%;
      width: 1.2rem;
      height: 0.21rem;
      margin-top: 0.13rem;
    }
  }

  .renmen {
    .dangeh {
      width: 9.48rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .dank {
        width: 30%;
        text-align: center;
        padding: 0.42rem 0;
        background: #fdf7f7;
        border-radius: 0.21rem;
        margin-top: 0.266rem;

        h6 {
          color: #333;
          font-size: 0.37rem;
        }

        .zhangl {
          font-size: 0.53rem;
          margin-top: 0.266rem;
          font-weight: 600;
        }

        .bili {
          font-size: 0.366rem;
          margin-top: 0.29rem;
        }
      }
    }
  }

  .zhnj {
    width: 100%;
    display: flex;
    height: 1.01rem;
    border-bottom: 0.03rem solid #e0e0e0;
    position: relative;

    span {
      width: 20%;
      text-align: center;
      line-height: 1.01rem;
      color: #333;
      font-size: 0.37rem;
    }

    .pokl {
      position: absolute;
      width: 0.53rem;
      height: 0.11rem;
      background: #5d7dfb;
      border-radius: 0.05rem;
      bottom: 0;
      left: 10%;
      margin-left: -0.266rem;
    }

    .xuan {
      color: #5d7dfb;
    }
  }

  .kanbox {
    width: 9.48rem;
    margin: 0 auto;
    margin-top: 0.32rem;
    padding-bottom: 0.32rem;
    display: flex;
    justify-content: space-between;

    span {
      color: #666;
      font-size: 0.35rem;
    }

    .k1 {
      width: 30%;
      padding-left: 0.266rem;
    }

    .k2 {
      width: 25%;
      text-align: center;
    }

    .k4 {
      width: 20%;
      text-align: right;
    }
  }

  .kfgfd {
    height: 1px;
    background: #e0e0e0;
  }

  .everylistmain {
    width: 9.48rem;
    margin: 0 auto;

    .shujuk {
      margin: 0 auto;
      margin-top: 0.4rem;
      padding-bottom: 0.32rem;
      display: flex;
      justify-content: space-between;

      .s1 {
        width: 30%;

        h6 {
          color: #333;
          font-size: 0.37rem;
          font-weight: 500;
        }

        p {
          color: #333;
          font-size: 0.32rem;
          margin-top: 0.13rem;

          span {
            width: 0.4rem;
            height: 0.4rem;
            background: #3b4fde;
            border-radius: 0.05rem;
            padding: 0.04rem;
            text-align: center;
            line-height: 0.4rem;
            color: #fff;
            font-size: 0.3rem;
          }

          a {
            display: inline-block;
            height: 0.4rem;
            line-height: 0.4rem;
            padding: 0 0.11rem;
            background: rgba(59, 79, 222, 0.1);
            border-radius: 0.05rem;
            color: #3b4fde;
            font-size: 0.32rem;
            vertical-align: middle;
          }

          .bj {
            background: #ea6248;
          }

          .sh {
            background: #aa3bde;
          }

          .shbg {
            color: #aa3bde;
            background: rgba(170, 59, 222, 0.1);
          }

          .bjbg {
            color: #ea6248;
            background: rgba(234, 98, 72, 0.1);
          }
        }
      }

      .s2 {
        text-align: center;
        font-size: 0.4rem;
        margin-top: 0.13rem;
        font-weight: 600;
        width: 25%;
      }

      .s4 {
        width: 20%;
        text-align: right;

        span {
          display: inline-block;
          width: 1.34rem;
          height: 0.67rem;
          border-radius: 0.13rem;
          color: #fff;
          font-size: 0.35rem;
          text-align: center;
          line-height: 0.67rem;
        }

        a {
          display: inline-block;
          width: 1.84rem;
          height: 0.67rem;
          border-radius: 0.13rem;
          color: #fff;
          font-size: 0.35rem;
          text-align: center;
          line-height: 0.67rem;
        }

        .hqgreenbtnbg {
          background: #09965f;
          padding: 0 5px;
        }

        .hqredbtnbg {
          background: #f11614;
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
